<template>
  <div id="manage">
    <div class="condition">
      <div class="firstInput">
        <p>所属系统</p>
        <el-select style="width:200px" size="small" v-model="searchParam.systemCode" placeholder="请选择所属系统" class="input" @change="refresh();">
          <el-option v-for="item in systemSelectList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="secondInput">
        <p>关键词</p>
        <el-input class="input" size="small" v-model="searchParam.keyword" placeholder="请输入关键词"></el-input>
      </div>
      <el-button class="conditionBtn" size="small" type="primary" @click="refresh()">查询</el-button>
      <el-button class="conditionBtn" size="small" type="primary" @click="isDisabled=false;addOrEditLoad($operType.add)" v-if="power.add">新增</el-button>
    </div>

    <el-table :data="tableData" stripe :max-height="tableMaxHeight" class="table" :tree-props="treeProps" row-key="id">
      <el-table-column fixed prop="name" label="菜单名称" min-width="150" align="left" header-align="center">
        <template slot-scope="scope">
          <el-link :underline="false" type="primary" @click="isDisabled = true;addOrEditLoad($operType.view,scope.row)">{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column v-for="(column, index) in columns" :fixed="column.fixed" :prop="column.prop" :label="column.label" :min-width="column.width" header-align="center" :align="column.align" :key="index">
        <template slot-scope="scope">
          <expand v-if="column.render" :render="column.render" :row="scope.row" :index="index" :column="column"></expand>
          <span v-else>{{scope.row[column.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120" align="center" v-if="power.update || power.delete">
        <template slot-scope="scope">
          <el-button type="text" class="primaryTextBtn" @click="isDisabled=false;addOrEditLoad($operType.update,scope.row)" v-if="power.update">修改</el-button>
          <el-button type="text" class="dangerTextBtn" @click="deleteData(scope.row)" v-if="power.delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增编辑表单-->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" class="dialogForm" :title="title" :visible.sync="dialogVisible" width="700px" :before-close="handleClose">
      <div class="line"></div>
      <el-form :ref="ref" :model="formParam" :rules="formParamRules" label-width="100px">
        <el-input size="small" v-model="formParam.id" style="display:none"></el-input>
        <el-row>
          <el-col :span="11">
            <el-form-item label="菜单名称" prop="name">
              <el-input size="small" v-model="formParam.name" name="name" :disabled="isDisabled">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="菜单编码" prop="powerCode">
              <el-input size="small" v-model="formParam.code" name="code" :disabled="isDisabled">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="父级" prop="parentId">
              <el-cascader :options="parentList" size="small" :disabled="isDisabled" :props="parentProps" v-model="formParam.parentId" clearable @change="parentChange"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="菜单类型" prop="type">
              <el-select style="width:200px" size="small" v-model="formParam.type" placeholder="请选择菜单类型" class="input" :disabled="isDisabled">
                <el-option v-for="item in menuType" :key="item.key" :label="item.text" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="所属系统">
              <el-select style="width:200px" size="small" v-model="formParam.systemCode" placeholder="请选择所属系统" class="input" :disabled="formParam.parentId != '0' || isDisabled">
                <el-option v-for="item in systemSelectList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="组件路径">
              <el-input size="small" v-model="formParam.compUrl" name="compUrl" :disabled="isDisabled">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="菜单路由">
              <el-input size="small" v-model="formParam.url" name="url" :disabled="isDisabled">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="菜单图标">
              <el-input size="small" v-model="formParam.icon" name="icon" :disabled="isDisabled">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="排序" prop="sortNum">
              <el-input size="small" v-model="formParam.sortNum" name="sortNum" :disabled="isDisabled">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注" prop="remark" size="small" :disabled="isDisabled">
              <el-input type="textarea" :rows="3" placeholder="请输入备注" v-model="formParam.remark" name="remark" :disabled="isDisabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="formBtn">
        <el-button size="small" type="primary" @click="addOrEditSubmit()" v-if="!isDisabled">确定</el-button>
        <el-button size="small" @click="cancel()" v-if="!isDisabled">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import selectTree from "@/components/elSelect/selectTree";
  export default {
    name: "sysMenu",
    inject: ["reload"],
    components: {
      selectTree,
    },
    data() {
      var that = this;
      // 获取按钮权限
      let power = {
        query: this.$util.btnShow("sysMenu.query"), //查询
        add: this.$util.btnShow("sysMenu.add"), //新增
        update: this.$util.btnShow("sysMenu.update"), //修改
        delete: this.$util.btnShow("sysMenu.delete") //删除
      };
      return {
        clientHeight: document.body.clientHeight, //窗口可视区域高度
        tableMaxHeight: 0, //表格的最大高度
        power: power, // 按钮显隐控制权限
        defaultProps: {
          children: "children",
          label: "name",
          value: "id",
        },
        menuType: that.$constant.menuType,
        moduleTypeCode: 'module',
        ref: "form",
        isDisabled: false, //表单是否可以编辑
        treeProps: {
          children: "children",
          hasChildren: "hasChildren",
        },
        parentProps: {
          checkStrictly: true,
          value: "id"
        },
        dialogVisible: false, //表单对话框显隐
        title: "",
        //搜索条件
        searchParam: {
          systemCode: window.globle.systemCode,
          keyword: "",

        },
        // 新增，编辑 表单校验
        formParamRules: {
          parentId: [{ required: true, message: "请选择父级", trigger: "change" }, ],
          type: [{ required: true, message: "请选择菜单类型", trigger: "change" }, ],
          name: [{ required: true, message: "请填写菜单名称", trigger: "blur" }, ],
          code: [{ required: true, message: "请填写菜单编码", trigger: "blur" }, ],
        },
        sendType: "", //add 表示新增  edit 表示编辑 view 表示预览
        tableData: [],
        //表格列配置
        columns: [{
            fixed: false,
            prop: "systemCode",
            label: "所属系统",
            align: "left",
            width: "120",
            render(h, param) {
              return h("div", that.systemListShow[param.row.systemCode]);
            },
          },
          {
            fixed: false,
            prop: "type",
            label: "菜单类型",
            align: "center",
            width: "100",
            render(h, param) {
              var value = that.menuType.map(function(v, i) {
                if (v.key == param.row.type) {
                  return v.text;
                }
              });
              return h("div", value);
            },
          },
          { fixed: false, prop: "code", label: "菜单编码", width: "-", align: "left" },
          {
            fixed: false,
            prop: "icon",
            label: "图标",
            align: "center",
            width: "80",
            render(h, param) {
              return h("i", { class: param.row.icon });
            },
          },
          { fixed: false, prop: "sortNum", label: "排序", width: "80", align: "center" },
          { fixed: false, prop: "remark", label: "备注", width: "-", align: "left" },
        ],
        // 新增编辑弹出表单
        formParam: {
          id: "",
          parentId: "",
          type: "",
          name: "",
          code: "",
          icon: "",
          url: "",
          compUrl: "",
          systemCode: "",
          // level: "",
          sortNum: "",
          remark: "",
        },
        formParamDefault: {
          id: "",
          parentId: "",
          type: "",
          name: "",
          code: "",
          icon: "",
          url: "",
          compUrl: "",
          systemCode: "",
          // level: "",
          sortNum: "",
          remark: "",
        },
        parentList: [], //父级列表
        systemSelectList: [], // 系统下拉数据
        systemListShow: {}
      };
    },
    mounted() {
      var that = this;

      this.refresh();
      this.$nextTick(function() {
        //设置表格的最大高度
        setTimeout(function() {
          that.tableMaxHeight = that.$util.setTableMaxHeight(true);
        }, 500);
      });
      window.onresize = () => {
        return (() => {
          window.clientHeight = document.body.clientHeight;
          that.clientHeight = window.clientHeight;
        })();
      };
    },
    watch: {
      clientHeight(val) {
        let that = this;
        setTimeout(function() {
          that.$nextTick(function() {
            heightSet();
            that.tableMaxHeight = that.$util.setTableMaxHeight(true);
          });
        }, 500);
      },
    },
    methods: {
      parentChange(val) {
        if (val == "0") {
          this.formParam.type = this.moduleTypeCode;
        }
      },
      handleClose(done) {
        done();
      },
      initSelect() {
        let that = this;
        // 获取所有的菜单树
        var param = new FormData();
        param.append("systemCode", that.searchParam.systemCode);
        that.$req.get(param, api.urlSysMenuTree, function(_r) {
          var list = [{ id: "0", label: "无", }, ];
          that.parentList = list.concat(_r.data);
        });
        // 获取系统编码
        this.$req.get({}, api.urlSystemSelect, function(_r) {
          that.systemSelectList = _r.data;
          for (const system of that.systemSelectList) {
            that.systemListShow[system.value] = system.label;
          }
        });
      },
      refresh() {
        //查询
        let that = this;
        var param = new FormData();
        param.append("systemCode", that.searchParam.systemCode);
        param.append("keyword", that.searchParam.keyword);
        that.$req.get(param, api.urlSysMenuTreeList, function(_r) {
          that.tableData = _r.data;
          that.initSelect();
        });
      },
      /**
       * 删除人员
       */
      deleteData(row) {
        let that = this;
        this.$util.msgbox.confrim("是否删除该数据?", function() {
          let param = new FormData();
          param.append("id", row.id);
          that.$req.post(param, api.urlSysMenuDelete, function(_r) {
            that.$util.notify.success("删除成功");
            that.refresh();
          });
        });
      },

      /**
       * 表单提交前的逻辑判断及赋值，根据 sendType 来判断是新增还是编辑  add表示新增edit 表示编辑
       */
      addOrEditSubmit() {
        var that = this;
        if (typeof(this.formParam.parentId) == "object") {
          this.formParam.parentId = this.formParam.parentId[this.formParam.parentId.length - 1]
        }
        var param = this.$util.formData(this.formParam, this.formParamDefault);
        var url;
        if (this.sendType == this.$operType.add.key) {
          url = api.urlSysMenuAdd;
        } else {
          url = api.urlSysMenuUpdate;
        }
        this.$req.postForm(that.$refs[that.ref], param, url, function(_r) {
          that.$util.notify.success("操作成功！");
          that.dialogVisible = false;
          that.refresh();
        });
      },

      /**
       * 添加或者编辑表单加载
       */
      addOrEditLoad(operType, row) {
        var that = this;
        this.dialogVisible = true;
        this.title = "菜单信息" + operType.text;
        this.sendType = operType.key;
        if (operType.key == this.$operType.add.key) {
          this.$util.formReset(this.formParam);
          this.formParam.systemCode = this.searchParam.systemCode;
        } else {
          this.formParam = that.$util.clone_str(row);
        }
      },
      /**
       * 取消
       */
      cancel() {
        this.dialogVisible = false;
      },
    },
  };
</script>

<style scoped lang='scss'>
  #manage {
    @include routerView;
  }

  .firstInput {
    @include inputLocation(280px);
  }

  .secondInput {
    @include inputLocation(260px);
  }

  .table {
    @include table;
  }

  .condition {
    @include condition;
  }

  .formBtn {
    @include formBtn;
  }

  .line {
    @include line;
  }

  .conditionBtn {
    @include conditionBtn;
    margin-top: 0px !important;
  }
</style>
<style lang='scss'>
  .dialogForm {
    @include dialogForm;
  }
</style>